<template>
	<view class="">
		<navView navTitle="合同付款" titleColor="#fff" :isBack="true"></navView>
		<view class="tablist">
			<view :class="tab_index == index?'items':'item'" v-for="(item,index) in tabList" :key="index" @tap="tapTab(index)">
				{{item.name}}
				<view class="tiao" v-if="tab_index == index"></view>
			</view>
		</view>
		<view class="project-list">
			<!-- 循环渲染每个项目 -->
			<view class="project-card" v-for="(project, index) in projects" :key="index">
				<!-- 项目名称和状态 -->
				<view class="project-header">
					<text>此时为项目名称</text>
				</view>
				<!-- 负责人信息 -->
				<view class="project-detail">
					<view class="userbox">
						销售：{{ project.sales }}
						<!-- 电话号码 -->
						<view class="phone-wrapper">
							<image class="image" src="https://hfd.bjlzkj.com/static/list/phone-icon.png" mode=""></image>
							<text>{{ project.phone }}</text>
						</view>
					</view>

				</view>
				<view class="contractCode">
					合同编码：NO.5689423563548
				</view>
				<view class="contractCode">
					待付款金额：5000000元
				</view>
				<!-- 功能标签栏 -->
				<view class="tab-bar">
					<text class="tab-item"
						@tap="$navTo('/subpkg/contract/contractDetail/contractDetail')">合同详情</text>
					<text class="tab-item">项目成果</text>
					<text class="tab-item">合同付款</text>
					<text class="tab-item">开票情况</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				projects: [{
						name: '项目一',
						status: 1,
						sales: '张静',
						technical: '王子初',
						finance: '罗婷',
						admin: '徐昊',
						phone: '13025689523',
					},
					{
						name: '项目二',
						status: 2,
						sales: '张静',
						technical: '王子初',
						finance: '罗婷',
						admin: '徐昊',
						phone: '15862140021',
					},
					{
						name: '项目三',
						status: 3,
						sales: '张静',
						technical: '王子初',
						finance: '罗婷',
						admin: '徐昊',
					},
				],
				tabList: [{
						name: '待付款',
						id: 1
					},
					{
						name: '已付款',
						id: 2
					},
					{
						name: '已完成',
						id: 3
					},
				],
				tab_index: 0
			}
		},
		onLoad() {

		},
		methods: {
			handleEvaluation(project) {
				uni.navigateTo({
					url: `/pages/evaluation/evaluation?projectId=${project.name}`,
				});
			},
			tapTab(ind){
				this.tab_index = ind
			}
		}
	}
</script>

<style lang="scss">
	.tablist {
		width: 100%;
		height: 78rpx;
		background: #fff;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 16rpx;

		.items {
			font-weight: 400;
			font-size: 28rpx;
			color: #222222;
			position: relative;

			.tiao {
				position: absolute;
				left: 50%;
				transform: translate(-50%);
				bottom: -10rpx;
				width: 38rpx;
				height: 4rpx;
				background: #64AFFF;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
			}
		}

		.item {
			font-weight: 400;
			font-size: 28rpx;
			color: #AFAFB2;
		}
	}

	.project-list {
		padding: 20rpx;
	}

	.project-card {
		background-color: #fff;
		border-radius: 10rpx;
		overflow: hidden;
		margin-bottom: 20rpx;
		padding: 20rpx;
		box-shadow: 0rpx 0rpx 15rpx 0rpx #ccc;

		.project-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 10rpx;

			text {
				font-size: 32rpx;
				font-weight: bold;
			}

			.status-tag {
				border-radius: 10rpx;
				padding: 6rpx 12rpx;
				font-size: 24rpx;
				font-weight: bold;

				&.completed {
					background-color: rgba(0, 160, 105, 0.1);
					color: #00a069;
				}

				&.ongoing {
					background-color: rgba(0, 122, 255, 0.1);
					color: #007aff;
				}

				&.not-started {
					background-color: rgba(255, 58, 58, 0.1);
					color: #ff3a3a;
				}
			}
		}

		.project-detail {
			font-size: 28rpx;
			color: #333;
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;

			.userbox {
				position: relative;
			}

			.phone-wrapper {
				position: absolute;
				bottom: -50rpx;
				left: 0;
				z-index: 10;
				display: flex;
				align-items: center;
				margin-top: 10rpx;
				background: #fff;
				box-shadow: 0 2rpx 6rpx 2rpx #c1c1c1;
				padding: 3rpx 5rpx;
				box-sizing: 10rpx;

				.image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 10rpx;
				}
			}
		}

		.contractCode {
			font-weight: 400;
			font-size: 24rpx;
			color: #7D7D7D;
			padding: 5rpx 0;
		}

		.tab-bar {
			display: flex;
			justify-content: space-between;
			margin: 20rpx 0;

			.tab-item {
				width: 22%;
				text-align: center;
				padding: 16rpx 0;
				background-color: #edf2fe;
				border-radius: 10rpx;
				color: #007aff;
				font-size: 24rpx;
			}
		}

		.service-evaluation {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 24rpx;
			color: #E56C2B;
			background-color: #F5F5F5;
			padding: 10rpx 10rpx;
			box-sizing: border-box;
			border-radius: 10rpx;

			.right {
				width: 8rpx;
				height: 16rpx;
				margin-left: 20rpx;
			}
		}
	}
</style>